import React, { useCallback, useEffect, useRef } from "react";

import * as echarts from "echarts";

const LIneChart = () => {
  const ref = useRef<HTMLDivElement | null>(null);

  const display = useCallback(() => {
    if (ref?.current) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(ref?.current);
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
        ],
      });
    }
  }, []);

  useEffect(() => {
    display();
  }, [display]);

  useEffect(() => {}, [ref]);
  /** 监听窗口变化事件。 */
  return <div ref={ref} style={{ height: 400, width: 400 }} />;
};

export default LIneChart;
